<template>
	<view class="container">
		<view class="header">
			<u-navbar title="设置支付密码" :autoBack="true"></u-navbar>
		</view>
		
		<view class="content">
			<view class="form-container">
				<view class="form-title">安全验证</view>
				
				<u--form labelPosition="top" :model="formData" :rules="rules" ref="uForm">
					<u-form-item label="邮箱" prop="email" borderBottom>
						<u--input
							v-model="formData.email"
							type="text"
							placeholder="请输入邮箱"
							border="none"
							prefixIcon="email"
							prefixIconStyle="font-size: 22px;color: #909399"
						></u--input>
					</u-form-item>
					
					<u-form-item label="验证码" prop="code" borderBottom>
						<u--input
							v-model="formData.code"
							type="text"
							placeholder="请输入验证码"
							border="none"
							prefixIcon="lock"
							prefixIconStyle="font-size: 22px;color: #909399"
						></u--input>
						<u-button slot="right" type="primary" size="mini" @click="getCode" class="verify-code-btn" :class="{'disabled': countdown > 0}">{{ countdown > 0 ? `${countdown}秒` : '获取验证码' }}</u-button>
					</u-form-item>
					
					<view class="password-section">
						<view class="section-title">设置支付密码</view>
					</view>
					
					<u-form-item label="新密码" prop="newPassword" borderBottom>
						<u--input
							v-model="formData.newPassword"
							type="password"
							placeholder="请输入6位数字密码"
							border="none"
							maxlength="6"
							prefixIcon="lock-open"
							prefixIconStyle="font-size: 22px;color: #909399"
						></u--input>
					</u-form-item>
					
					<u-form-item label="确认密码" prop="confirmPassword" borderBottom>
						<u--input
							v-model="formData.confirmPassword"
							type="password"
							placeholder="请再次输入新密码"
							border="none"
							maxlength="6"
							prefixIcon="checkmark-circle"
							prefixIconStyle="font-size: 22px;color: #909399"
						></u--input>
					</u-form-item>
				</u--form>
				
				<view class="tips">
					<text class="tip-text">* 支付密码为6位数字</text>
					<view class="forget-pwd" @click="goToForgetPwd">
						<text>忘记密码？</text>
					</view>
				</view>
				
				<button class="submit-btn" @click="submitForm">确认设置</button>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js'
	
	export default {
		data() {
			return {
				formData: {
					email: '',
					code: '',
					newPassword: '',
					confirmPassword: ''
				},
				
				userInfo: null,
				countdown: 0,
				rules: {
					email: {
						type: 'string',
						required: true,
						message: '请输入有效的邮箱',
						trigger: ['blur', 'change'],
						validator: (rule, value, callback) => {
							const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
							if (!emailPattern.test(value)) {
								callback('邮箱格式不正确');
							} else {
								callback();
							}
						}
					},
					code: {
						type: 'string',
						required: true,
						len: 6,
						message: '请输入6位验证码',
						trigger: ['blur', 'change']
					},
					newPassword: {
						type: 'string',
						required: true,
						len: 6,
						message: '请输入6位新密码',
						trigger: ['blur', 'change'],
						pattern: /^\d{6}$/
					},
					confirmPassword: {
						type: 'string',
						required: true,
						len: 6,
						message: '请再次输入新密码',
						trigger: ['blur', 'change'],
						validator: (rule, value, callback) => {
							if (value !== this.formData.newPassword) {
								callback('两次输入的密码不一致');
							} else {
								callback();
							}
						}
					}
				}
			};
		},
		computed: {
			maskPhone() {
				if (!this.userInfo || !this.userInfo.phone) return '未绑定手机号';
				const phone = this.userInfo.phone;
				return phone.substring(0, 3) + '****' + phone.substring(7);
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			if (this.userInfo && this.userInfo.userEmail) {
				this.formData.email = this.userInfo.userEmail;
			}
		},
		methods: {
			// 获取验证码
			getCode() {
				if(this.countdown > 0) return;
				if(!this.formData.email) {
					uni.showToast({
						title: '请先填写邮箱地址',
						icon: 'none'
					});
					return;
				}
				
				const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if(!emailPattern.test(this.formData.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					});
					return;
				}
				
				// 开始倒计时
				this.countdown = 60;
				const timer = setInterval(() => {
					if(this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
				
				// 调用后端发送验证码接口
				request({
					url: '/emailcode-service/email/code',
					method: 'GET',
					data: {
						email: this.formData.email
					}
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '验证码已发送至邮箱',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.message || '验证码发送失败',
							icon: 'none'
						});
						// 发送失败时重置倒计时
						this.countdown = 0;
						clearInterval(timer);
					}
				}).catch(err => {
					console.error('验证码发送失败', err);
					uni.showToast({
						title: '验证码发送失败',
						icon: 'none'
					});
					// 发送失败时重置倒计时
					this.countdown = 0;
					clearInterval(timer);
				});
			},
			
			// 提交表单
			submitForm() {
				this.$refs.uForm.validate().then(async valid => {
					if (valid) {
						try {
							
							const params = {
								userId: this.userInfo.userId,
								email: this.formData.email,
								code: this.formData.code,
								payPassword: this.formData.newPassword
							};
							
							const res = await request({
							url: 'api/user-service/user/setPayPassword',
							method: 'POST',
							data: params
						});
							
							if (res.code === 200) {
								uni.showToast({
									title: '设置成功',
									icon: 'success'
								});
								
								// 返回上一页
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							} else {
								uni.showToast({
									title: res.message || '操作失败',
									icon: 'none'
								});
							}
						} catch (error) {
							console.error('提交失败', error);
							uni.showToast({
								title: '网络错误，请稍后重试',
								icon: 'none'
							});
						}
					}
				});
			},
			
			// 跳转到忘记密码页面
			goToForgetPwd() {
				uni.navigateTo({
					url: '/pages/my/forgetPayPassword'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f9fc;
}

.header {
	background-color: #ffffff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.content {
	padding: 40rpx 30rpx;
}

.form-container {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
}

.form-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 30rpx;
	position: relative;
	padding-left: 20rpx;
	
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 30rpx;
		background: linear-gradient(to bottom, #44ADFB, #0070FF);
		border-radius: 3rpx;
	}
}

.password-section {
	margin: 30rpx 0 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	position: relative;
	padding-left: 20rpx;
	
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 30rpx;
		background: linear-gradient(to bottom, #4CAF50, #3c9);
		border-radius: 3rpx;
	}
}

.u-form-item {
	margin-bottom: 25rpx;
	padding: 15rpx 0;
	border-bottom: 1px solid #f0f0f0;
}

.tips {
	margin-top: 40rpx;
	padding: 0 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.tip-text {
		font-size: 24rpx;
		color: #909399;
	}
	
	.forget-pwd {
		text {
			font-size: 26rpx;
			color: #0070FF;
			font-weight: 500;
		}
	}
}

.submit-btn {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	background: linear-gradient(135deg, #4CAF50 0%, #3c9 100%);
	color: #ffffff;
	font-size: 32rpx;
	border-radius: 45rpx;
	margin-top: 60rpx;
	border: none;
	font-weight: 500;
	box-shadow: 0 10rpx 20rpx rgba(76, 175, 80, 0.25);
	transition: all 0.3s;
	
	&:active {
		transform: scale(0.98);
		box-shadow: 0 5rpx 10rpx rgba(76, 175, 80, 0.15);
	}
}

.verify-code-btn {
	min-width: 180rpx;
	height: 70rpx;
	line-height: 70rpx;
	padding: 0 20rpx;
	margin-left: 20rpx;
	border-radius: 35rpx;
	background: linear-gradient(135deg, #44ADFB, #0070FF);
	box-shadow: 0 6rpx 12rpx rgba(0, 112, 255, 0.15);
	transition: all 0.3s;
	
	&.disabled {
		background: linear-gradient(135deg, #ccc, #999);
		box-shadow: none;
		opacity: 0.7;
	}
	
	&:active {
		transform: scale(0.98);
		box-shadow: 0 3rpx 6rpx rgba(0, 112, 255, 0.1);
	}
}
</style> 